<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 路由器渲染 -->
        <router-view />
    </div>

    <script src="js/vue.js"></script>
    <!-- 路由 -->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        // 路由跳转
        // router-link --- 声明方式
        // 编程式跳转
        // path + query -----get请求
        // name + params ----- post 请求

        //路由传参
        let comA = {
            template:`
                <div>
                    <div>这是comA组件</div>
                    <router-link to="/comB">跳转到B</router-link>
                    <button @click="comAclick">跳转到B</button>    
                </div>
            `,
            data(){
                return {
                    objA:{
                        userName:'tom',
                        age:'11',
                        height:199
                    }
                }
            },
            methods:{
                comAclick(){
                    // path+query
                    // this.$router.push({
                    //     path: '/comB',
                    //     query: this.objA
                    // })

                    // name+params
                    this.$router.push({
                        name:'comB',
                        params:this.objA
                    })
                    //this.$router.replace('/comB')
                }
            }
        }
        let comB = {
            template:`
                <div>
                    <div>这是comB组件</div>
                    <router-link to="/comC">跳转到C</router-link>
                    <button @click="comBclick">跳转到C</button>
                    <button @click="getQuery">获取query参数</button>
                </div>
            `,
            mounted(){
                // console.log(window.location.href.slice(window.location.href.indexOf('?') + 1))
            },
            methods:{
               comBclick(){
                   this.$router.push({
                       path:'/comC'
                       //name:'comA'
                   })
               } ,
               getQuery(){
                   console.log(this.$route.params)
                   console.log(this.$route.query)
               }
            }
        }
        let comC = {
            template:`
                <div>
                    <div>这是comC组件</div>
                    <router-link to="comA">跳转到A</router-link>
                    <button @click="comCclick">跳转到A</button>    
                </div>
            `,
            methods:{
                comCclick(){
                    this.$router.push({
                        path: '/comA'
                    })
                }
            }
        }


        //创建路由实例
        let router = new VueRouter({
            //路由列表
            routes:[
                {path:'/',component:comA},
                {path:'/comA',name:'comA',component:comA},
                {path:'/comB',name:'comB',component:comB},
                {path:'/comC',name:'comC',component:comC}
            ]
        })
        let myApp = new Vue({
            el:'#app',
            router,
            //components:{
                //comA:comA,
                //comB:comB,
                //comC:comC
            //},
            data:{

            }
        })
    </script>



</body>
</html>